<template>
    <div>
        <div>
            <mt-header title="我的贷款记录">
                <router-link to="/" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
                <mt-button icon="more" slot="right"></mt-button>
            </mt-header>
        </div>
        <van-pull-refresh style="height: 800px" v-model="refreshing" @refresh="onRefresh">
            <van-search
                    v-model="searchValue"
                    @keydown.enter.native="InitCreditList"
                    shape="round"
                    background="#fff"
                    placeholder="请输入年度搜索(搜索格式如: 2020-2021)"
            />
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
            >
                <!--这哩记录一下 数据库中没有thum字段 所以我自己创建了一个beautiful数组 在遍历enlists数组的同时
                    根据enlists名称遍历的不同下标来决定beautiful数组对应该下标的图片
                    解决了即使没有数据库字段也可以在自己遍历时加上额外需要遍历的模拟数据-->
                <van-card
                        style="border-radius: 10px; width: 360px; margin-left: 6px"
                        v-for="(item, index) in creditList"
                        :key="index"
                >
                    <template #tags>
                         <span style="float: left;margin-top: 4px">
                             年度:
                            {{item.duringYear}}
                        </span>
                        <span style="float: left;margin-top: 10px; width: 100%">
                            身份证号:
                            {{item.cardIdentity}}
                        </span>
                        <div style="float: left;width: 200px">
                            <div style="float: left;width: 340px;margin-top: 10px">
                                <van-tag plain type="primary">家庭住址</van-tag>
                                  <span style="margin-left: 10px">{{item.homeOfCity}}{{item.homeOfArea}}{{item.homeOfDetail}}</span>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">合同签订状态</van-tag>
                                <span style="margin-left: 10px">{{item.contractId === null ? '未签订' : '已签订'}}</span>
                            </div>
                        </div>
                    </template>
                    <template #footer>
                        <van-button @click="showDetail(item)" type="primary" style="border-radius: 10px" size="mini">查看</van-button>
                    </template>
                </van-card>
                <van-dialog
                        v-model="show"
                        confirmButtonText="确定"
                        title="我的贷款基础信息" show-cancel-button>
                    <div style="width: 200px;height: 240px;margin-left: 60px;margin-top: 20px">
                        <div style="float: left;width: 200px">
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">我的姓名</van-tag>
                                <span style="margin-left: 10px">
                                    {{creditDetail.userName}}
                                </span>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">贷款金额</van-tag>
                                <span style="margin-left: 10px">
                                    {{contractDetail.firstBorrowMoney}}
                                </span>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">户口性质</van-tag>
                                <span style="margin-left: 10px">
                                    {{creditDetail.residence}}
                                </span>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">共同借款人</van-tag>
                                <span style="margin-left: 10px">
                                    {{creditDetail.concatOfName}}
                                </span>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">共同借款人联系电话</van-tag>
                                <div style="margin-left: 10px; margin-top: 10px">
                                     <span>
                                    {{creditDetail.concatOfPhone}}
                                    </span>
                                </div>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">共同借款人身份证号</van-tag>
                                <div style="margin-left: 10px; margin-top: 10px">
                                     <span>
                                    {{creditDetail.concatOfCardIdentity}}
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-dialog>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import Notify from "vant/lib/notify";
    import axios from 'axios'
    import Toast from "vant/lib/toast";

    export default {
        data() {
            return{
                searchValue: '',
                user: {},
                show: false,
                list: [],
                loading: false,
                finished: false,
                refreshing: false,
                beautiful: [],
                creditList: [],
                creditDetail: {},
                contractDetail: {},
            }
        },
        created() {
           this.InitCreditList()
        },
        methods: {
            InitCreditList() {
                if (sessionStorage.getItem('token') === null) {
                    Notify({ type: 'danger', message: '请先登录' });
                }
                axios.get('http://localhost:8080/system/user/profile',
                    {
                        headers: { Authorization: sessionStorage.getItem('token')}
                    }).then(res => {
                    this.user = res.data.data

                    if (this.searchValue === '') {
                        axios.get('http://localhost:8080/student/credit/data/name/' + this.user.userName,
                            {
                                headers: { Authorization: sessionStorage.getItem('token')}
                            }).then(res => {
                            console.log(res.data.data)
                            this.creditList = res.data.data
                            this.loading = false
                        })
                    }

                    if (this.searchValue !== '') {
                        this.creditList = []
                        console.log(this.searchValue)
                        axios.get('http://localhost:8080/student/credit/data/year/' + this.searchValue + '/' + this.user.userName,
                            {
                                headers: { Authorization: sessionStorage.getItem('token')}
                            }).then(res => {
                            console.log(res.data.data)
                            if (res.data.data === null) {
                                Toast('该年度没有贷款记录!');
                            }
                            this.creditList.push(res.data.data)
                            this.loading = false
                        })
                    }
                })

            },
            showDetail(data) {
                console.log(data)
                this.creditDetail = data
                this.contractDetail = data.contract
                this.show = true
            },
            onRefresh() {
                setTimeout(() => {
                    Toast('刷新成功')
                    if (sessionStorage.getItem('token') === null) {
                        Notify({ type: 'danger', message: '请先登录' });
                    }
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
        },
    }
</script>

<style scoped>

</style>
